<template>
    <div>
        <van-tabbar v-model="active" z-index="999" inactive-color="#999" active-color="#f00">
            <van-tabbar-item to="/" replace> 
                <span>首页</span>
      
                <template #icon="props">
                    <span class="iconfont icon-shouye"></span>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/card"  replace>
                <span>购物车</span>
           
                <template #icon="props">
                    <span class="iconfont icon-gouwuche"></span> 
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/order" replace>
                <span>订单</span>
       
                <template #icon="props">
                    <span class="iconfont icon-pinglun" ></span>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/user" replace>
                <span>个人中心</span>
                
                <template #icon="props">
                    <span class="iconfont icon-gerenzhongxin"></span>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const active =  ref(0);
</script>

<style scoped>

</style>